<template>
    <div>
        <div class="interval">
            光速打卡-注册
        </div>
        <el-form ref="form" :rules="rules" :model="RegUserBO">
            <el-form-item prop="clockUserName">
                <el-input placeholder="请输入用户名" v-model="RegUserBO.clockUserName">
                    <el-button slot="prepend" icon="el-icon-user-solid"></el-button>
                </el-input>
            </el-form-item>
            <el-form-item prop="clockUserPhone">
                <el-input placeholder="请输入手机号" v-model="RegUserBO.clockUserPhone">
                    <el-button slot="prepend" icon="el-icon-phone"></el-button>
                    <el-button slot="append" @click="sendSms(obj)" :disabled=isDisBind>{{message}}
                    </el-button>
                </el-input>
            </el-form-item>
            <el-form-item prop="verification">
                <el-input placeholder="请输入验证码" v-model="RegUserBO.verification">
                    <el-button slot="prepend" icon="el-icon-s-help"></el-button>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-select style="width: 100%" v-model="RegUserBO.clockCityId" filterable placeholder="请选择">
                    <el-option
                            v-for="item in cityList"
                            :key="item.value"
                            :label="item.clockCityName"
                            :value="item.clockCityId">
                    </el-option>
                    <el-button slot="prepend" icon="el-icon-s-help"></el-button>
                </el-select>
            </el-form-item>
            <el-form-item prop="clockUserSuperior">
                <el-input placeholder="请输入邀请码" v-model="RegUserBO.clockUserSuperior" :disabled=true>
                    <el-button slot="prepend" icon="el-icon-s-flag"></el-button>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button style="width: 100%" @click="submitForm('form')" type="primary">注册</el-button>
            </el-form-item>
        </el-form>
        <div style="text-align: center">
            <el-link href='javaScript:;'>已有账号?下载APP</el-link>
            <!--            <el-link @click="downLoad(1)">安卓版</el-link>-->
            <!--            <a href="/__UNI__A416E99_1111173349.apk">安卓</a>-->
            <el-link style="margin-left: 10px;" href="http://daka.quanwan.vip/gsdk.apk" target="_blank">安卓</el-link>
            <el-link style="margin-left: 10px;" href="https://zc.pgyer.com/mTDctV"> IOS</el-link>
            <br>
            <el-link>请在浏览器中打开本页面下载</el-link>
        </div>
    </div>
</template>

<script>
    export default {
        name: "register",
        data() {
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.RegUserBO.userPassword) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                cityList: [],
                RegUserBO: {
                    clockUserName: '',
                    clockUserPhone: '',
                    userPassword: '',
                    userPasswordTwo: '',
                    clockCityId: 110000,
                    verification: '',
                    clockUserSuperior: 0
                },
                url: 'http://quanwan.vip/message.png',
                message: '获取手机验证码',
                isDisBind: false,
                waitTime: 60,
                intervalId: null,
                rules: {
                    clockUserName: [{required: true, message: '请输入', trigger: 'blur'}],
                    clockUserPhone: [{required: true, message: '请输入', trigger: 'blur'}],
                    userPassword: [{required: true, message: '请输入', trigger: 'blur'}],
                    userPasswordTwo: [{validator: validatePass2, trigger: 'blur'}],
                    userZname: [{required: true, message: '请输入', trigger: 'blur'}],
                    verification: [{required: true, message: '请输入', trigger: 'blur'}],
                    clockUserSuperior: [{required: true, message: '请输入', trigger: 'blur'}],
                }
            }
        },
        methods: {
            queryCity() {
                let object = this.$createReqParamData({queryType:0});
                this.$axios.post("clock-city/getCity",object).then((response) => {
                    this.cityList = response.data.data;
                })
            },
            sendSms() {
                if (this.RegUserBO.clockUserPhone == null || this.RegUserBO.clockUserPhone == '') {
                    this.$message.warning("请输入手机号");
                    return;
                }
                let data = this.$createReqParamData({
                    loginType:1,
                    clockUserPhone:this.RegUserBO.clockUserPhone
                });
                this.openInterval();
                this.openLoadingView();
                this.$axios.post("clock-user/getVerification", data).then((response) => {
                    var data = response.data;
                    this.loadingView.close();
                    if (data.code == 0) {
                        this.$message.success("发送成功!");
                    }
                })
            },
            openInterval() {
                this.intervalId = setInterval(() => {
                    if (this.waitTime > 0) {
                        this.waitTime--;
                        this.message = this.waitTime;
                        this.isDisBind = true;
                    } else {
                        clearInterval(this.intervalId); //清空定时器
                        this.message = "重新获取验证码";
                        this.isDisBind = false;
                        this.waitTime = 60;
                    }
                }, 1000);
            },
            submitForm(formName) {
                this.openLoadingView();
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let data = this.$createReqParamData(this.RegUserBO);
                        this.$axios.post("clock-user/register", data).then((response) => {
                            var data = response.data;
                            if (data.code == 0) {
                                this.$message.success("处理成功!");
                            }
                            this.loadingView.close();
                        })
                    } else {
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
        },
        mounted() {
            var ua = navigator.userAgent.toLowerCase();
            if (ua.match(/weibo/i) == "weibo") {
                this.$alert('<span style="vertical-align: middle;">请点击右上角菜单，选择在浏览器中打开</span> <img style="vertical-align: middle;" src="http://image.quanwan.vip/message2.png" width="50px" height="50"> ', '提示', {
                    showCancelButton: false,
                    showConfirmButton: false,
                    dangerouslyUseHTMLString: true,
                    beforeClose: () => {

                    }
                });
            } else if (ua.indexOf('qq/') != -1) {
                this.$alert('<span style="vertical-align: middle;">请点击右上角菜单，选择在浏览器中打开</span> <img style="vertical-align: middle;" src="http://image.quanwan.vip/message2.png" width="50px" height="50"> ', '提示', {
                    showCancelButton: false,
                    showConfirmButton: false,
                    dangerouslyUseHTMLString: true,
                    beforeClose: () => {

                    }
                });
            } else if (ua.match(/MicroMessenger/i) == "micromessenger") {
                var v_weixin = ua.split('micromessenger')[1];
                v_weixin = v_weixin.substring(1, 6);
                v_weixin = v_weixin.split(' ')[0];
                if (v_weixin.split('.').length == 2) {
                    v_weixin = v_weixin + '.0';
                }
                if (v_weixin < '6.0.2') {
                    this.$alert('<span style="vertical-align: middle;">请点击右上角菜单，选择在浏览器中打开</span> <img style="vertical-align: middle;" src="http://image.quanwan.vip/message2.png" width="50px" height="50"> ', '提示', {
                        showCancelButton: false,
                        showConfirmButton: false,
                        dangerouslyUseHTMLString: true,
                        beforeClose: () => {

                        }
                    });
                } else {
                    this.$alert('<span style="vertical-align: middle;">请点击右上角菜单，选择在浏览器中打开</span> <img style="vertical-align: middle;" src="http://image.quanwan.vip/message2.png" width="50px" height="50"> ', '提示', {
                        showCancelButton: false,
                        showConfirmButton: false,
                        dangerouslyUseHTMLString: true,
                        beforeClose: () => {

                        }
                    });
                }
            }
            var code = this.$route.params.code;
            if (code == null) {
                this.$alert('<span style="vertical-align: middle;">非法进入</span> ', '提示', {
                    showCancelButton: false,
                    showConfirmButton: false,
                    dangerouslyUseHTMLString: true,
                    beforeClose: () => {

                    }
                });
            }
            this.RegUserBO.clockUserSuperior = code;
            this.queryCity();
        }
    }
</script>

<style scoped>

</style>